<template>
  <!-- 我的 -->
    <div class="my">
        <TopHeader title="我的" />
        <div class="login_and_bind_box">
            <span class="iconfont icon-person user_mybigicon"></span>
            <div class="login_text">
                <p><a href="./login.html">登录</a>/<a href="./login.html">注册</a></p>
                <p><span class="iconfont icon-shouji"></span>暂未绑定手机号</p>
            </div>
            <span class="sanjiao"></span>
        </div>
        <!-- 余额 -->
        <div class="money_bigbox">
            <div>
                <span><span style="color: #ff9900;">0.00</span>元</span>
                <span>我的余额</span>
            </div>
            <div>
                <span><span style="color: #ff5f3e;">0</span>个</span>
                <span>我的优惠卷</span>
            </div>
            <div>
                <span><span style="color: #6ac20b;">0</span>分</span>
                <span>我的积分</span>
            </div>
        </div>
        <!-- 功能列表 -->
        <ul class="mainlis_box">
            <li><span class="iconfont icon-order-s" style="color: #7cd1b7;"></span> 我的订单</li>
            <li><span class="iconfont icon-jifen" style="color: #ff603f;"></span> 积分商城</li>
            <li><span class="iconfont icon-vip" style="color: #ffa521;"></span> 硅谷外卖会员卡</li>
            <li><span class="iconfont icon-fuwu" style="color: #02a774;"></span> 服务中心</li>
        </ul>
    </div>
</template>

<script>
    export default {
        name:'My'
    }
</script>
<style src="../../assets/css/reset.css" scoped></style>
<style lang="stylus" scoped>
    .my
        .login_and_bind_box
            // width 100%
            height 115px
            background-color #02a774
            margin-top 1px
            display flex
            justify-content space-between
            align-items center
            padding 0 20px 0 10px
            .user_mybigicon
                display block
                width 72px
                height 72px
                border 1px solid #cccc
                font-size 75px
                border-radius 50%
                overflow hidden
                background-color #e4e4e4
                &::before
                    margin 0 0 0 -1px
                    color #7e8c8d
            .login_text
                height 115px
                flex 1
                display flex
                flex-direction column
                justify-content center
                p
                    color #fff !important
                    margin-left 16px
                    &:nth-child(1)
                        margin-bottom 12px
                    &:nth-child(2)
                        span
                            display inline-block
                            font-size 30px
                            vertical-align middle
                            margin-left -15px
                            margin-right -12px
                    a
                        color #fff !important
            .sanjiao
                display block
                width 7px
                height 7px
                border-top 1px solid #fff
                border-right 1px solid #fff
                transform rotate(45deg)

        .money_bigbox
            height 92px
            background-color #fff
            display flex
            &>div
                flex 1
                display flex
                flex-direction column
                justify-content center
                align-items center
                &>span
                    font-size 15px
                    color #adadad
                    &:nth-child(2)
                        margin-top 16px
                    &>span
                        font-size 30px
                        font-weight 800
                &:nth-child(2)
                    border-left 1px solid #f5f5f5
                    border-right 1px solid #f5f5f5
        .mainlis_box
            margin-top 15px
            &>li
                height 55px
                background-color #fff
                line-height 55px
                padding-left 11px
                color #a4a4a
                font-size 18px
                &:last-child
                    margin-top 12px
                &>span
                    vertical-align middle
                    font-size 25px

</style>